{extend name="public/base" /}
{block name="content"}
<style>
    .formDiv{
        height: 100%;
    }
    .blank{
        margin-bottom: 10%;
    }
    .el-pager li{
        font-size: 19px;
    }

    .typeDiv{
        width:33%;
        float: left;
    }
    .typeLabel{
        width:10%;
    }
    .typeInput{
        width:23%;
    }
    .typeRadio{
        width:23%;
    }

    .btn{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;
        background-color: #ff8400;color: #fff;display: inline-block;height: 28px;line-height: 28px;text-align: center;
        width: 72px;transition: background-color 0.2s linear 0s;border:none;cursor:pointer;margin:0 0 20px;}
    .uploadList{width:700px;margin:0 auto;font-size: 13px;}
    .btn:hover{background-color: #e95a00;text-decoration: none;
        color: #fffef9;}
    .ul_pics li{float:left;width:160px;height:160px;border:1px solid #ddd;padding:2px;text-align: center;margin:0 5px 5px 0;}
    .ul_pics li .img{width: 160px;height: 140px;display: table-cell;vertical-align: middle;}
    .ul_pics li img{max-width: 160px;max-height: 140px;vertical-align: middle;}
    .progress{position:relative;padding: 1px; border-radius:3px; margin:60px 0 0 0;}
    .bar {background-color: green; display:block; width:0%; height:20px; border-radius:3px; }
    .percent{position:absolute; height:20px; display:inline-block;top:3px; left:2%; color:#fff }
    .containerUpload {
        width: 680px;
        min-height: 400px;
        margin: 30px auto 0 auto;
        border: 1px solid #d3d3d3;
        background: #fff;
        -moz-border-radius: 5px;
        -khtml-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .img_big{
        width: 260px;
        height: 227px;
    }
</style>
<h3>创建文章</h3>
<input type="text" id="title" class="el-input__inner blank" name="businessName" placeholder="请输入文章标题"/>
<!-- 选择类别栏目 -->
<h3>选择发布类别栏目</h3>
<select id="nlType" class="el-input__inner blank" >
    <option value='0' selected='selected'>请选择对应栏目</option>
    <?php foreach($classDataArr as $k => $v){ ?>
    <option value='<?php echo $v["id"]; ?>'><?php echo $v['classname']; ?></option>
    <?php } ?>
</select>
<!-- 选择发布类型 -->
<h3>选择发布类型</h3>
<div style="width: 100%;display:inline-block;">
    <div class="typeDiv"><label class="typeLabel"><input class="typeRadio"  name="type" type="radio" value="1" />三图式 </label></div>
    <div class="typeDiv"><label class="typeLabel"><input class="typeRadio" name="type" type="radio" value="2" />左文右图 </label></div>
    <div class="typeDiv"><label class="typeLabel"><input class="typeRadio" name="type" type="radio" value="3" />一张大图 </label></div>
</div>

    <!-- 封面上传 -->
    <div id="upload" style="display: none">
        <div class="containerUpload">
            <h4 class="title" style="margin: 1%;">请上传封面图片</h4>
            <div class="uploadList" >
                <a class="btn" id="btn" style="margin: 1%;">上传图片</a> 最大500KB，支持jpg，gif，png格式。
                <ul id="ul_pics" class="ul_pics clearfix" style="margin: 1%;list-style-type:none">

                </ul>
            </div>
        </div>
    </div>

<!-- 选择是否轮播 -->
<h3>选择是否轮播</h3>
<div style="width: 100%;display:inline-block;">
    <div class="typeDiv"><label class="typeLabel"><input class="typeInput" name="is_banner" type="radio" value="1" />是 </label></div>
    <div class="typeDiv"><label class="typeLabel"><input class="typeInput" name="is_banner" type="radio" value="0" />否 </label></div>
</div>

<!-- 加载编辑器的容器 -->
<h3>添加内容</h3>
<script id="container" name="content" type="text/plain">
        文章内容输入区
</script>

<input type="button" id="ueditorSubmit" style="width: 60%;margin-top: 5%;" class="el-button el-button--primary"
       value="提交"/>

<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/zh-cn.js"> </script>
<!-- 封面上传 -->
<!--<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>-->
<script type="text/javascript" src="/plupload/plupload.full.min.js"></script>
<!--<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/sucaihuo.js"></script>-->
<script type="text/javascript" src="/static/index/js/uploadList.js"></script>




    <!-- 图片前端上传 -->
    <script type="text/javascript">
        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
            browse_button: 'btn', // 上传按钮
            url: "/ajaxUpload.php", //远程上传地址
            flash_swf_url: 'plupload/Moxie.swf', //flash文件地址
            silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址
            filters: {
                max_file_size: '500kb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
                mime_types: [//允许文件上传类型
                    {title: "files", extensions: "jpg,png,gif"}
                ]
            },
            multi_selection: true, //true:ctrl多文件上传, false 单文件上传
            init: {
                FilesAdded: function(up, files) { //文件上传前

                    if ($("#ul_pics").children("li").length > 2) {
                        alert("您上传的图片太多了！");
                        return;
                        //uploader.destroy();
                    } else {
                        var li = '';
                        plupload.each(files, function(file) { //遍历文件
                            console.log(file);
                            li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
                        });
                        $("#ul_pics").append(li);
                        uploader.start();
                    }
                },
                UploadProgress: function(up, file) { //上传中，显示进度条
                    $("#" + file.id).find('.bar').css({"width": file.percent + "%"}).find(".percent").text(file.percent + "%");
                },
                FileUploaded: function(up, file, info) { //文件上传成功的时候触发
                    var data = JSON.parse(info.response);

                    $("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p style='margin-top:20px;'>" + data.name + "</p><p style='margin-top:10px;'><a onclick='removePicLi("+file.id+")'>删除</a></p>");
                },
                Error: function(up, err) { //上传出错的时候触发
                    alert(err.message);
                }
            }
        });
        uploader.init();

        function removePicLi(li){
            var list=document.getElementById("ul_pics");
            list.removeChild(li);
        }
    </script>


{/block}